<template>
  <div class="particulars">
    <!-- 头部 -->
    <eleheader title="商家详情">
      <!-- 插槽左 -->
      <span slot="left" class="header_left" @click="goback">
        <!-- 图标 -->
        <van-icon name="arrow-left" />
      </span>
      <!-- 插槽右 -->
      <span slot="right" class="header_right">
        <!-- 图标/或者登录注册 -->
      </span>
    </eleheader>

    <h2 style="height: 45px; padding-left: 10px">活动与属性</h2>
    <div class="eatmsg">
      <ul>
        <li><span>保</span><span>今晚打老虎</span></li>
        <li><span>保</span><span>今晚打老虎</span></li>
        <li><span>保</span><span>今晚打老虎</span></li>
      </ul>
    </div>
    <!-- 食品安全 -->
    <div class="shopmsg">
      <ul>
        <li style="border-bottom: 1px solid #dddddd">
          <span style="float: left; font-size: 22px; font-weight: bold">
            食品监督安全公示</span
          >
          <span style="float: right; font-size: 16px">企业认证详情 ></span>
        </li>
        <li class="sonmsg">
          <span>微笑1</span>
          <span>
            <div>监督检查结果: <span>良好</span></div>
            <div>检查时间</div>
          </span>
        </li>
      </ul>
    </div>
    <!-- 商家信息 -->
    <div>
      <h2
        style="
          height: 40px;
          padding-left: 10px;
          border-bottom: 1px solid #dddddd;
        "
      >
        商家信息
      </h2>
      <ul style="padding-left: 10px">
        <li style="padding: 18px 0; border-bottom: 1px solid #dddddd">
          蜜雪冰城
        </li>
        <li style="padding: 18px 0; border-bottom: 1px solid #dddddd">
          地址：北京市朝阳区
        </li>
        <li style="padding: 18px 0; border-bottom: 1px solid #dddddd">
          营业时间：[06:30/09:00]
        </li>
        <li style="padding: 18px 0; border-bottom: 1px solid #dddddd">
          餐饮服务许可证
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import eleheader from "@/components/eleheader";

export default {
  components: { eleheader },
  name: "particulars",
  methods: {
    goback() {
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped >
/* .profile {
  height: 100%;
  padding: 50px 0;
  background-color: #0a0;
} */
.particulars {
  height: calc(100% - 45px);
  overflow: scroll;
  // padding-top: 45px;
}
.eatmsg {
  border-top: 1px solid #dddddd;
  border-bottom: 16px solid #ebebeb;
  ul {
    padding: 0 10px;
    li {
      line-height: 31px;
      span {
        margin-left: 8px;
      }
      span:nth-child(1) {
        color: gray;
        background-color: red;
      }
    }
  }
}
.shopmsg {
  border-bottom: 16px solid #ebebeb;
  ul {
    padding: 0 10px;
    li:nth-child(1) {
      height: 48px;
      line-height: 48px;
      font-size: 18px;
    }
    li:nth-child(2) {
      height: 92px;
      display: flex;
      align-items: center;
      span:nth-child(1) {
        width: 30%;
      }
      span:nth-child(2) {
        line-height: 40px;
      }
    }
  }
}

.header_left,
.header_right {
  padding: 0 20px;
  flex: 1;
}
.header_left {
  .van-icon {
    float: left;
    line-height: 45px;
  }
}
.header_right {
  .van-icon {
    float: right;
    line-height: 45px;
  }
}
</style>